<template>
	<view class="golds_change">
		<view class="gold_mores f f_column">
			<text>可兑金币</text>
			<view class="gold bold">
				{{userInfo.accountEntity.goldCoinAmount}}
			</view>
		</view>
		<view class="gold_text">兑换数量</view>

		<view class="gold_warps f f_align_center f_align">
			<input v-model="amount" @blur="setChange" maxlength="8" class="f f_align f_align_center" placeholder-class="placeStyle" type="number" value="" placeholder="请输入要兑换的金币" />
			<view class="all" @click="setAll">全部</view>
		</view>
		<view class="gold_text">兑换比例：<text class="t_t">10金币/元</text></view>


		<button class="biding_btn" :loading="isLoading" @click="goldChange">
			立即兑换
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading:false,
				amount:'',
				userInfo:{
					accountEntity:{
						goldCoinAmount:0,
						brokerageAmount:0
					}
				}
			};
		},
		onShow() {
			this.getUserInfo();
		},
		methods:{
			//设置全部兑换
			setAll(){
				this.amount = this.setAllGolds(this.userInfo.accountEntity.goldCoinAmount);
			},
			//获取用户信息哦
			async getUserInfo(){
				const _this = this;
				let res = (await _this.$http('/api/auth/user/getUserInfo','POST',{})).data;
				uni.stopPullDownRefresh();
				if(res && res.code == '0'){
					let userInfo = res.data;
					_this.userInfo = userInfo;
					uni.setStorageSync('userInfo',userInfo);
				}
			},
			//金币兑换
			goldChange(){
				const _this = this;
				if(_this.isLoading){
					return _this.$showToast('转换中，请稍后～')
				}
				if(_this.amount == ''){
					return _this.$showToast('请输入要兑换的金币数量～')
				}
				if(Number(_this.amount) < 10){
					return _this.$showToast('至少兑换10个金币～')
				}
				if(Number(_this.amount)%10 != 0){
					return _this.$showToast('只能兑换10的整数倍的金币～')
				}
				_this.goldsChange_amount();
			},
			setAllGolds(price){
				return (Math.floor(Number(price)/10)*10);
			},
			setChange(e){
				const _this= this;
				let s = e.target.value;
				if(s > 10){
					_this.amount = _this.setAllGolds(s);
				}
			},
			//金币转换哦
			goldsChange_amount(){
				const _this = this;
				_this.isLoading = true;
				_this.$http('/api/auth/user/transformGoldCoinToBrokerage','POST',_this.amount+'').then(res=>{
					_this.isLoading = false;
					if(res && res.data.code == '0'){
						_this.$showToast('兑换成功～');
						_this.amount = '';
						_this.getUserInfo();
					}else{
						_this.$showToast(res.data.msg);
					}
				}).catch(e=>{
					_this.isLoading = false;
				})
			}
		},
		onPullDownRefresh() {
			this.getUserInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.golds_change{
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		border-top: solid 2rpx #E6E6E6;
		padding: 24rpx 32rpx;
		.gold_mores{
			box-sizing: border-box;
			width: 100%;
			height: 216rpx;
			border-radius: 16rpx;
			background-color: $ych_color;
			padding: 36rpx 48rpx;
			font-size: 28rpx;
			color: #fff;
			.gold{
				font-size: 64rpx;
			}
		}
		.gold_text{
			color: #333;
			margin-top: 40rpx;
			.t_t{color: $ych_color;}
		}

		.gold_warps{
			border-bottom: solid 1rpx $ych_br_color;
			margin-top: 8rpx;
			input{
				font-weight: bold;
				font-size: 88rpx;
				&::before{
					display: flex;
					content: 'G';
					font-size: 56rpx;
					color: #1A1A1A;
					font-weight: bold;
					margin-right: 20rpx;
				}
			}
			.all{
				width: 100rpx;
				font-size: 28rpx;
				color: $ych_color;
				flex-shrink: 0;
				text-align: right;
			}
		}
	}
</style>
